<template>
  <div class="list">
    <div class="list-item" v-for="(item, index) in list" :key="index">
      <router-link :to="{name: 'Detail', params: {goodId: item.id}}">
        <img class="list-pic" :src="item.imgUrl">
        <div class="list-info">
          <p class="title">{{item.title}}</p>
          <p class="desc">{{item.desc}}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          "id": 1,
          "imgUrl": "../../static/images/8.png",
          "title": "“没见识的穷女孩，牛排都点8分熟。”",
          "desc": "不要在物欲横流的世界，迷失了自我。 这样独一无二的你，其实很美好。 爸爸是镇上的木匠，妈妈是饭店服务员。 一年忙到头，家庭年收入不过4万多。 这..."
        },
        {
          "id": 2,
          "imgUrl": "../../static/images/8.png",
          "title": "铲屎官为了红，把猫咪喂成猪，网友：反对虐猫",
          "desc": "如今真是行行出状元了，要说现在什么职业最火，那肯定是网红了，并且涉及各个领域，其中宠物领域更是热门领域之一。而各大博主们为了红也真的是拼了，各种..."
        },
        {
          "id": 3,
          "imgUrl": "../../static/images/8.png",
          "title": "聊天结束时，还不忘说这些话的男人，骨子里真的很爱你",
          "desc": "情字的这个度，他再怎么去把握，哪怕用尽一生，也抵不过她弯唇一笑”，男人爱上一个女人，那是一种情不自禁的情，爱上了，就是彻底把她装进了自己的心里..."
        },
        {
          "id": 4,
          "imgUrl": "../../static/images/8.png",
          "title": "中国古代爱情诗词",
          "desc": "中国古代的诗词在世界文化史上都占有浓墨淡彩的一笔,很多经典名句流传于世。关于爱情这个主题，更是文人墨客主要抒发的对象。下面让我们一起看看有哪些诗..."
        }
      ]
    };
  }
};
</script>

<style scoped>
.list-item {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #dcdcdc;
}
.list-pic {
  float: right;
  width: 125px;
  height: 100px;
  display: block;
  border-radius: 4px;
}
.list-info {
  width: 500px;
  float: left;
}
.title {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.desc {
  line-height: 22px;
  font-size: 13px;
  color: #999;
}
</style>
